<template>
	<view>
		<view class="login_box">
			<u-form :model="model" ref="uForm" >
				<u-form-item label="账号" prop="username" label-width="120">
					<u-input v-model="model.username" border placeholder="请输入账号" clearable/>
				</u-form-item>
				<u-form-item label="密码" prop="password" label-width="120">
					<u-input v-model="model.password" border type="password" :passwordIcon="false" placeholder="请输入密码"/>
				</u-form-item>
				<u-button @click="login" type="error" size="medium">提交</u-button>
			</u-form>
			<navigator url="../register/register" hover-class="none">没有账号? 注册一个</navigator>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model: {
				username: '',
				password: ''
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入账号',
						trigger: ['change','blur'],
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: ['change','blur'],
					}
				],
				
			}
		};
	},
	methods: {
		login() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss">
page {
	// display: flex;
	// align-items: center;
	// flex-direction: column;
	
	.login_box {
		margin-top: 40%;
		width: 100%;
		padding: 0 5%;
		text-align: center;
		uni-navigator {
			margin-top: 40upx;
			font-size: 28upx;
			color: #FA3534;
		}
	}
}
</style>
